<template>
  <div>
    <!-- 右侧部分 -->
    <el-collapse accordion class="border-0 question-collapse">
      <div class="test-case-header border-bottom">
        <strong class="title"
          :class="ALLTYPE[submitDetail.resultdata] ? ALLTYPE[submitDetail.resultdata][1] : ALLTYPE['WT'][1]">
          {{ submitDetail.resultdata ? ALLTYPE[submitDetail.resultdata] ? ALLTYPE[submitDetail.resultdata][1] :
            ALLTYPE['WT'][1] : "" }}
        </strong>
        <div class="title-info">
          <span>编程语言：<span>{{ getLanguage(submitDetail) }}</span></span>
          <span>提交时间：<span>{{ submitDetail.createdAt ? TimeYH(submitDetail.createdAt) : "-" }}</span></span>
        </div>
      </div>
      <!-- <div v-if="Array.isArray(submitDetail.info)"> -->
      <el-row class="submission-title">
        <h6 class="margin-bottom0">测试点信息</h6>
      </el-row>
      <div v-if="Array.isArray(submitDetail.info)" class="" v-for="(v, infoK) in subtask(submitDetail.info)"
        :key="'a_' + infoK">
        <div class="test-case-title">Subtask {{ infoK + 1 }}</div>
        <el-scrollbar>
          <div class="test-case-container">
            <div class="test-case-content border text-center" v-for="(e, k) in v" :key="`b_${k}`"
              :class="e.tn ? e.tn[1] : ALLTYPE['RE'][1]" @mouseleave="mouseleave" @mouseenter="mouseenter">
              <div class="div-1-1">
                <div class="text-left">#{{ k + 1 }}</div>
                <strong class="text-uppercase" v-text="e.tn ? e.tn[0] : 'RE'"></strong>
                <br />
                <span>{{ time(submitDetail.result, [e]) }}/{{ memory(submitDetail.result, e) }}</span>
              </div>
              <el-collapse-transition>
                <div @click="downloadtestcase(e.ID, k)" class="transition">
                  <div>下载测试点</div>
                </div>
              </el-collapse-transition>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <!-- </div> -->
      <div v-else>
        <div class="col p-0 mb-4 mt-4">
          <h6 class="col">错误提示</h6>
          <!-- <el-scrollbar> -->
          <pre class="code-pre" v-text="submitDetail.info?.msg" />
          <!-- </el-scrollbar> -->
        </div>
      </div>
      <el-row class="submission-title">
        <h6 class="margin-bottom0">源代码</h6>
        <div :style="{ textAlign: 'right' }">
          <el-button class="submission-btn" size="default" type="primary" @click="download2(submitDetail)">编辑器打开
          </el-button>
          <el-button class="submission-btn" size="default" type="primary"
            @click="myCopy(submitDetail.context || '')">复制源代码
          </el-button>
        </div>
      </el-row>
      <div class="col p-0">
        <pre v-highlight :class="'language-' + submitDetail.language">
          <code v-text="submitDetail.context" class="code-pre"/>
        </pre>
      </div>
    </el-collapse>
    <div class="text-right">
      <br />
      <br />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { computed, onMounted } from "vue";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { ALLTYPE } from "@/util/jianchatime";
import subtask from "../../../util/subtask";
import { TimeYH } from "../../../util/time";

import { useClipboard } from '@vueuse/core';
import { download2 } from '../../../util/code';
import { downloadtext } from "../../../util/dowmload";

const { text, copy, copied, isSupported } = useClipboard()
type P = {
  ID?: number;
  row: Studycodemodel.Iuserquestion
};
interface Iusertest extends Studycodemodel.Iquestiontestcasesuser { }
const prop = defineProps<P>()
const store = useStore(Storekey)

const user = computed(() => {
  return store.state.user
})
// watch(() => prop.row, e => {
//   console.log("watch caseDetail prop=>", e)
// })
const submitDetail = computed(() => {
  console.log("computed caseDetail prop=>", prop)
  return prop.row
})

onMounted(() => {
  // console.log("onMounted caseDetail prop=>", prop)
})

function getLanguage(row: Studycodemodel.Iuserquestion): string {
  let rowLanguage = row.language?.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
  rowLanguage = rowLanguage !== 'Cpp' ? rowLanguage : 'C++'
  return rowLanguage || "-"
}
function time(esult: Studycodemodel.Iuserquestion["result"],
  info: Studycodemodel.Iuserquestion["info"]) {
  if (!Array.isArray(info)) return NaN;
  let t = 0;
  for (let v of info) {
    if (t < Number(v.t)) {
      t = Number(v.t);
    }
  }
  return Math.floor(t) + "ms";
}

function memory(esult: Studycodemodel.Iuserquestion["result"],
  info: Studycodemodel.Iuserquestioninfo) {
  if (typeof info.memory === "number") {
    return info.memory / 1024 < 1
      ? Math.floor(info.memory) + "kb"
      : Math.floor(info.memory / 1024) + "mb";
  } else if (typeof info.memory === "object") {
    return "4kb";
  }
  return info.memory || "4kb";
}

function downloadtestcase(ID?: number, index?: number) {
  fetch(`/api/download/downloadtestcase?ID=${ID}`).then(e => e.json()).then((e: { error: number, msg: string, data: Studycodemodel.Itestcases }) => {
    if (e.error) {
      ElMessage.error(e.msg)
      return
    }
    const data: { name: string, text: string }[] = []
    if (e.data.input) {
      data.push({
        name: `${index}.in`,
        text: e.data.input
      })
    }
    if (e.data.output) {
      data.push({
        name: `${index}.out`,
        text: e.data.output
      })
    }
    if (e.data) {
      downloadtext(e.data.type, submitDetail.value.question?.ID + '_' + index, data)
    } else {
      ElMessage.error('文件找不到')
    }
  })
}
function mouseleave(e: MouseEvent) {
  // 判断codeforces 
  if (submitDetail.value?.question?.range === 'codeforces') return
  if (e.target) {
    const n: any = e.target
    n.querySelector('.div-1-1').style.display = 'block'
    const div: HTMLDivElement = n.querySelector('.transition')

    const bgcolor = Object.values(ALLTYPE).map(e => e[1]).find(t => {
      return n.className.includes(t)
    })
    div.style.display = 'none'
    div.className = `transition bg-${n.className}`
    div.style.height = '0'
  }
}

function mouseenter(e: MouseEvent) {
  // 判断codeforces 
  if (submitDetail.value?.question?.range === 'codeforces') return
  if (e.target) {
    const n: any = e.target
    n.querySelector('.div-1-1').style.display = 'none'
    const div: HTMLDivElement = n.querySelector('.transition')
    const bgcolor = Object.values(ALLTYPE).map(e => e[1]).find(t => {
      return n.className.includes(t)
    })
    div.style.display = 'flex'
    div.className = `transition bg-${bgcolor}`
    div.style.height = '100%'
  }
}

function myCopy(str: string) {
  try {
    str ? copy(str) : '';
    ElMessage.success("复制成功");
  } catch (error) {
    console.error("myCopy error=>", str, error)
  }
}

</script>

<style scoped>
.test-case-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
}

.test-case-title {
  margin-bottom: 10px;
}

.title {
  font-size: 28px;
  display: inline-block;
}

.title-info {
  width: 100%;
  padding: 8px 0;
  font-size: 13px;
  display: flex;
  justify-content: flex-start;
}

.title-info span {
  display: inline-block;
  padding-right: 10px;
  color: #c0c4cc;
}

.submission-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}

.submission-btn {
  width: 100px;
  height: 36px;
  border-radius: 4px;
  background-color: rgba(70, 131, 250, 1);
  font-size: 14px;
}

/* ===================old======================= */
.table pre {
  margin-bottom: 0px;
}

h5 {
  font-size: 16px;
}

.txt {
  padding-bottom: 12px;
}

.txt strong {
  line-height: 24px;
  padding-right: 10px;
  font-size: 24px;
  display: inline-block;
}

.div-hr {
  height: 41px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.div-hr div {
  height: 1px;
  background-color: cornsilk;
}

.question-collapse {
  padding: 5px 0;
}

.test-case-container {
  max-height: 60vh;
}

.test-case-content {
  width: 108px;
  height: 100px;
  display: inline-block;
  margin: 5px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

.test-case-content .div-1-1 {
  border-top-width: 4px;
  border-top-style: solid;
}


.div-1-1 .text-left {
  font-size: 14px;
  /* margin-top: 10px; */
  padding-left: 12px;
  color: #909399 !important;
}

.div-1-1 .text-uppercase {
  font-size: 28px;
  display: inline-block;
  /* margin-bottom: 10px; */
}

.transition {
  transition: 1s all ease;
  display: none;
  color: #fff;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}

.div-1-1 span {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: #c0c4cc;
}

.context1 {
  border: 1px solid #d9d9d9;
}

.list-group-item {
  border-left: none;
  border-top: none;
  border-bottom: none;
  border-right: 1px solid #d9d9d9;
  cursor: pointer;
  background-color: #f5f5f5;
}

.list-group-item:hover {
  background-color: #fff;
}

.list-group-horizontal {
  width: 100%;
  border-left: 1px solid #d9d9d9;
  border-top: 1px solid #d9d9d9;
  border-bottom: none;
  border-right: 1px solid #d9d9d9;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  overflow-x: auto;
}

.testcase .pre {
  border-color: #d9d9d9;
  border: 1px solid #d9d9d9;
  padding: 12px;

  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
    0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

.testcase pre {
  border: none;
  background-color: #f5f5f5;
}

.h33 {
  font-size: 18px;
  color: var(--color-43);
  margin-top: 24px;
  margin-bottom: 12px;
}

.ex {
  margin-bottom: 12px;
}

.ex1 {
  font-size: 12px;
  color: #8c8c8c;
}

.form-xl {
  border: 1px solid #d9d9d9;
  /* Depth 4 */

  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
    0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
  border-radius: 2px;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.el-form .row {
  --bs-gutter-x: 24px;
}

.el-icon-1 {
  width: 24px;
  height: 24px;
  background-color: var(--color-cheng);
  line-height: 24px;
  color: #fff;
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
}

.el-icon-2 {
  width: 24px;
  height: 24px;
  background-color: #d9d9d9;
  line-height: 24px;
  color: #fff;
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
}

.disbutton {
  border: none;
  background-color: #f5f5f5;
  --el-button-hover-color: "#000";
  --el-button-hover-background-color: #f5f5f5;
  height: 28px;
  line-height: 28px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 12px;
  padding-right: 12px;
}
</style>

<style>
.question-collapse .is-active {
  background-color: var(--color-d2e4ff) !important;
  border-bottom-width: 0;
}

.question-collapse .el-collapse-item__content {
  padding-bottom: 0 !important;
}
</style>